<template>
	<view class="content">
		<view style="padding: 0 32rpx">
			<searchHistory localStorageName="homeSearchHistory" placeHolder="搜索文章/用户" @search="search" @clear="clear">
			</searchHistory>
		</view>

		<view v-if="showInfo" class="display_flex tabs">
			<up-tabs :current="currentTab" lineWidth="56rpx" lineHeight="6rpx" :activeStyle="{ color: '#fff' }"
				:inactiveStyle="{ color: '#666666' }"
				itemStyle="font-weight: 500;font-size: 36rpx;margin-bottom:40rpx;width:120rpx;" lineColor="#F3E0BB"
				:list="tablist" @click="clickTab"></up-tabs>
		</view>

		<swiper v-if="showInfo" class="swiper" :autoplay="false" :style="{ height: height + 'px' }"
			:current="currentTab" @change="changTab">
			<swiper-item>
				<mescroll-uni :height="height + 'px'" @init="mescrollInit" @down="downCallback" @up="upCallback"
					:down="downOption" :up="upOption">
					<!-- 文章 -->
					<view class="messageBox" v-for="(item, index) in messageList">
						<view class="userInfo">
							<image src="http://112.124.50.179:8888/imgs/home/avater.jpg" alt="" class="avater"></image>
							<view>
								<view class="name">这是我的昵称</view>
								<view class="date">2024.8.24 11:24:10</view>
							</view>
						</view>
						<view class="intro">先贤祠墓纪念堂的一天——记录</view>
						<view class="imageList">
							<image src="http://112.124.50.179:8888/imgs/home/jibai.png" alt=""></image>
							<image src="http://112.124.50.179:8888/imgs/home/jibai2.png" alt=""></image>
							<image src="http://112.124.50.179:8888/imgs/home/jibai3.png" alt=""></image>
						</view>
						<view class="footer">
							<image src="http://112.124.50.179:8888/imgs/home/more.png" alt="" class="more" @click.stop="showMore(item)">
							</image>
							<view class="display_flex">
								<image src="http://112.124.50.179:8888/imgs/home/info.png" alt=""></image>
								<view style="margin-right: 32rpx">12</view>
								<image src="http://112.124.50.179:8888/imgs/home/like.png" alt=""></image>
								<view>12</view>
							</view>
						</view>
						<image class="decoration" src="http://112.124.50.179:8888/imgs/home/decoration.png"></image>
					</view>

					<view class="safeArea"></view>
				</mescroll-uni>
			</swiper-item>
			<swiper-item>
				<mescroll-uni :height="height + 'px'" @init="mescrollInit" @down="downCallback" @up="upCallback"
					:down="downOption" :up="upOption">
					<!-- 用户 -->
					<div class="userList">
						<div class="user" v-for="(item, index) in userList">
							<image src="http://112.124.50.179:8888/imgs/home/empty.png" mode=""></image>
							<div class="name singleLineOverflowHidden">上岛咖啡冷静的思</div>
						</div>
					</div>
					<view class="safeArea"></view>
				</mescroll-uni>
			</swiper-item>
		</swiper>

		<!-- 按钮弹框 -->
		<u-popup :show="showMoreFunc" bgColor="rgba(0,0,0,0)" @close="closeMore" custom-style="padding:0 16rpx 0;">
			<u-button shape="circle" :custom-style="moreBtnStyle" @click="report">举报</u-button>
			<!-- <u-button shape="circle" :custom-style="moreBtnStyle" @click="report">删除</u-button> -->
			<u-button shape="circle" :custom-style="{ ...moreBtnStyle, fontWeight: 600 }"
				@click="closeMore">取消</u-button>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive
	} from 'vue';
	import searchHistory from '/components/searchHistory/index.vue';
	import {
		onHide
	} from '@dcloudio/uni-app';
	import {
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom);

	const showInfo = ref(false);
	const tablist = reactive([{
			name: '文章'
		},
		{
			name: '用户'
		}
	]);
	const currentTab = ref(0); //默认为文章，0
	const messageList = ref([1, 2, 3, 5, 6, 7]);
	const userList = ref([1, 2, 3, 5, 6, 7]); //用户列表

	//翻页信息
	let height = ref(0); //滚动区域
	const downOption = ref({
		use: false
	});
	const upOption = ref({
		page: {
			size: 10 // 每页数据的数量,默认10
		},
		noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
		empty: {
			tip: '暂无相关数据'
		}
	});

	// 更多按钮
	const showMoreFunc = ref(false);
	const moreBtnStyle = {
		height: '120rpx',
		borderRadius: '26rpx 26rpx 26rpx 26rpx',
		backgroundColor: '#fff',
		fontWeight: '400',
		fontSize: '40rpx',
		color: '#007AFF',
		marginBottom: '16rpx'
	};
	let reportedId = ref('')
	//初始化
	onMounted(() => {
		let tabsHeight = 100
		let searchHeight =
			height.value = uni.getSystemInfoSync().screenHeight - getApp().globalData.navHeight - 80 - uni.upx2px(
				tabsHeight);
		// #ifdef h5
		height.value = height.value - 16;
		// #endif
	});

	/**
	 * 切换tab
	 */
	const clickTab = (item) => {
		currentTab.value = item.index;
	};
	const changTab = (item) => {
		currentTab.value = item.detail.current
	}

	/**
	 * 搜索
	 */
	const search = (content) => {
		showInfo.value = true;
		console.log(content);
	};

	/**
	 * 清空搜索内容
	 */
	const clear = () => {
		showInfo.value = false;
	};

	const goBack = () => {
		uni.navigateBack();
	};

	// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
	const upCallback = (mescroll) => {
		setTimeout(() => {
			const curPageData = [1, 2, 3]; // 当前页数据
			messageList.value = messageList.value.concat(curPageData); //追加新数据
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		}, 2000);
		// apiGoods(mescroll.num, mescroll.size).then(res => {
		// 	const curPageData = res.list || [] // 当前页数据
		// 	if (mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
		// 	goods.value = goods.value.concat(curPageData); //追加新数据
		// 	mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		// }).catch(() => {
		// 	mescroll.endErr(); // 请求失败, 结束加载
		// })
	};

	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};

	const showMore = () => {
		showMoreFunc.value = true;
		reportedId.value = item.dynamicId
		uni.hideTabBar();
	};

	const closeMore = () => {
		uni.showTabBar();
		showMoreFunc.value = false;
	};

	/**
	 * 点击举报
	 */
	const report = () => {
		closeMore();
		uni.navigateTo({
			url: '/subPages/chaoshan/report?reportType=1&&reportedId=' + reportedId.value
		});
	};
</script>

<style lang="scss">
	page {
		background-color: #1e201f;
	}

	.tabs {
		padding-bottom: 32rpx;
	}

	.content {
		overflow: hidden;
		padding: 0;
	}

	.messageBox {
		margin: 24rpx 32rpx;
		padding: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		position: relative;

		.userInfo {
			display: flex;
			align-items: center;

			.avater {
				width: 72rpx;
				height: 72rpx;
				border-radius: 0;
				margin-right: 16rpx;
				border-radius: 50%;
			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #0e0e0e;
				line-height: 33rpx;
				font-style: normal;
				text-transform: none;
			}

			.date {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #666666;
				line-height: 23rpx;
				font-style: normal;
				text-transform: none;
			}
		}

		.intro {
			margin: 16rpx 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #0e0e0e;
			line-height: 33rpx;
			font-style: normal;
			text-transform: none;
		}

		.imageList {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16rpx;

			image {
				width: 196rpx;
				height: 196rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}
		}

		.footer {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 28rpx;
			font-style: normal;
			text-transform: none;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
		}

		.decoration {
			position: absolute;
			width: 112rpx;
			height: 138rpx;
			top: 0;
			right: 0;
		}

		&:first-child {
			margin-top: 0;
		}
	}

	.userList {
		margin: 0 32rpx;

		.user {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
		}

		.name {
			flex: 1;
			color: #ffffff;
		}

		image {
			width: 80rpx;
			height: 80rpx;
			margin-right: 32rpx;
		}
	}

	.safeArea {
		height: 32rpx;
		width: 100%;
	}
</style>